<style lang="less">
  .itemApp1App1{
    height: 32px;
    line-height: 32px;
  }
  .row-left{
    text-align: center;
  }
  .title{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .info-middleApp{
    height: 410px;
    background-color: #F8F8FF;
    padding-left: 70px;
    padding-right: 70px;
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
  .head-img {
    height: 120px;
    width:100px;
    position:absolute;
    right:1px;
    top:10px;
  }
  .red-name{
    color: red
  }
</style>
<template>
  <div>
    <img src="" alt="">
    <div id="qrcode1" ref="qrcode1" style="position: absolute;margin-top: -12%;"></div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data () {
    return {
    }
  },
  methods: {
    showErcode (codeUrl) {
      let _this = this
      console.log(codeUrl)
      setTimeout(function () {
        _this.getCode(codeUrl)
      }, 1000)
    },
    getCode (codeUrl) {
      document.getElementById('qrcode1').innerHTML = ''
      var qrcode = new QRCode(document.getElementById('qrcode1'), {
        text: codeUrl,
        top: 0,
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      console.log(qrcode, 'qrcode')
    }
  },
  mounted () {
    this.showErcode('http://qstb.mzj.shenyang.gov.cn/#/erQcode')
  }
}
</script>
